<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="doAjaxGetJSON()">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>
    </div>
    <div id="result"></div>
    <script src="js/jquery.min.js"></script>
    <script>
        function doAjaxLoad(){
            let url="http://localhost/doGet";
            $("#result").load(url,function (){
                console.log("load computer")
            }); //一异步加载默认get请求，加载url资源，然后更新到result处
        }

        function doAjaxPost(){
            let url="http://localhost/doPost";
            //let params="id=1&name=xiaomi&letter=x";
            let params={id:2,name:"huawei",letter:"h"};
            $.post(url,params,function (result){
                console.log(result);
            })
        }

        function doAjaxGetJSON(){
            let url="http://localhost/doGet";
            let params="";
            $.getJSON(url,params,function (result){
                console.log(result);
            });
        }

        function doAjaxGet(){
            let url="http://localhost/doGet";
            let params="";
            $.get(url,params,function (result){
               console.log(result);
            },"json");//服务端响应到到客户端
        }

        function doAjax(){
            //1.请求url
            let url="http://localhost/doAjax";
            //2.请求参数
            let params="msg=hello jquery ajax";
            //3.发送异步ajax请求(send ajax request)
            $.ajax({
               url:url,
               data:params,
               success:function(result){
                   $("#result").html(result);
               },
               error:function (){
                   $("#result").html("request fail");
               }
            });

        }
    </script>
</body>
</html>